<template>
  <div class="search">
    <!-- 头部 -->
    <shop-header :is-show-icon="isShowIcon">  
      <div class="search-link">
        <x-icon class="search-icon" type="ios-search" size="20"></x-icon>
        <input v-model="keyword" class="search-input" type="text" placeholder="请输入要搜索的商品">
      </div>
      <span class="search-sub" @click="subSearch(keyword)">搜索</span>  
    </shop-header>
    <div class="search-history">
      <div class="cell-item bottom-1px" v-for="(item,index) in searchHistory" @click.stop="selectSearch(item)">
        <span class="text">{{ item }}</span>
        <span class="delete" @click.stop="deleteItem(item)"><x-icon type="ios-close-empty" size="24"></x-icon></span>
      </div>
      <div class="clear-history" v-if="searchHistory.length>0" @click="clearHistory"><x-icon type="trash-a" size="20"></x-icon><span>清除全部</span></div>
    </div>
    <div v-if="hotTags.length > 0" class="hot-search">
      <h3 class="hot-search-title bottom-1px">热门搜索</h3>
      <div class="text-wrapper">
        <span class="label" @click="selectSearch(item.keyword)" v-for="(item, index) in hotTags" :key="index">{{ item.keyword }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'  
import ShopHeader from '@/components/public/ShopHeader'
import http from '@/utils/http';
export default {
  components: {
    ShopHeader
  },
  data () {
    return {
      isShowIcon: false,
      keyword: '',
      hotTags: []
    }
  },
  computed: {
    ...mapGetters(['searchHistory'])
  },
  methods: {
    getHotSearch () {
      http.get('/api/v1/hotSearch', {}, false, res => {
        if (res.status == 1) {
          this.hotTags = res.data
        }
      });
    },
    subSearch (keyword) {
      if (this.trim(keyword) != '') {
        this.$store.dispatch('submitSearch', keyword)
        this.$router.push({ path: '/goods', query:{ keyword: keyword } })    
        this.keyword = ''
      }else {
        this.$vux.toast.show({
          text: '请输入关键字！',
          position: 'middle',
          type: 'warn',
          width: 'auto'
        })
      }
    },
    trim (str) {
      return str.replace(/(^\s*)|(\s*$)/g, "")
    },
    selectSearch (val) {
      this.$router.push({ path: '/goods', query:{ keyword: val } })
    },
    deleteItem (item) {
      let that = this
      this.$vux.confirm.show({
        title: '提示信息',
        content: '确定要删除吗？',
        onConfirm () {
          that.$store.dispatch('delSearchItem', item)
        }
      })
    },
    clearHistory () {
      let that = this
      this.$vux.confirm.show({
        title: '提示信息',
        content: '确定要删除全部吗？',
        onConfirm () {
          that.$store.dispatch('clearSearch')
        }
      })
    }
  },
  mounted () {
    this.getHotSearch();
  }
}
</script>

<style scoped>
.search-link {
  display: flex;
  background: #f5f5f5;
  border-radius: 30px;
  height: 30px;
  font-size: 0;
  line-height: 30px;
  box-sizing: border-box;
  text-align: left;
  align-items: center;
  margin-right: 10px;
}
.search-link .search-icon {
  margin: 0 2px 0 10px;
  fill: #999;
}
.search-link .search-input {
  flex: 1;
  height: 28px;
  outline: none;
  font-size: 12px;
  background: none;
  padding-right: 10px;
  padding-left: 5px;
  color: #666;
}
.search-sub {
  position: absolute;
  right: 15px;
  top: 6px;
  width: 30px;
  height: 30px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #666;
}
.cell-item {
  display: flex;
  background: #fff;
  align-items: center;
  padding: 8px 15px;
}
.cell-item:active {
  background: #f5f5f5;
}
.cell-item:after {
  bottom: 0;
}
.cell-item .text {
  flex: 1;
  font-size: 14px;
  color: #666;
}
.cell-item .delete {
  height: 22px;
}
.cell-item svg {
  fill: #999;
}
.clear-history {
  display: block;
  background: #fff;
  padding: 8px 15px;
  text-align: center;
  color: #999;
  font-size: 0;
  margin-bottom: 5px;
}
.clear-history span,
.clear-history svg {
  display: inline-block;
  vertical-align: middle;
}
.clear-history svg {
  position: relative;
  margin-top: -4px;
  fill: #999;
  margin-right: 2px;
}
.clear-history span {
  font-size: 14px;
}
.hot-search {
  background: #fff;
}
.hot-search-title {
  font-size: 14px;
  line-height: normal;
  color: #333;
  padding: 10px 15px;
}
.text-wrapper {
  padding: 10px 15px;
  font-size: 0;
}
.label {
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  background: #f0f2f5;
  color: #787878;
  margin: 0 5px 5px 0
}
</style>
